<template>
    <div class="new_album">
      <ul class="newDisc_type">
      <li :class="{select:currentIndex===index}" @click="chooseTag(index)" v-for="(item,index) in area">{{item.name}}</li>
    </ul>
      <ul class="newDisc_info">
      <li v-for="(list,index) in albumList" :key="index">
        <div class="img" @click="toAlbumDetail(list.album_mid,list.album_id)">
          <img :src="list.album_pic" alt="">
          <div class="icon">
            <span class="iconfont icon-bofang1"></span>
          </div>
        </div>
        <div class="name ellipsis" @click="toAlbumDetail(list.album_mid,list.album_id)">{{list.album_name}}</div>
        <div class="singer ellipsis"><span @click="toSingerDetail(singer.mid)" v-for="(singer,index) in list.singers" :key="index">{{singer.name}}{{index===list.singers.length-1?'':'/'}}</span></div>
        <div class="date" v-show="num===19">{{list.public_time}}</div>
      </li>
    </ul>
      <Pagination :page="currentPage" :total="total" :size="20" @currentChange="currentChange" v-show="num===19"></Pagination>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import Pagination from '@/components/Pagination/Pagination'
  export default {
        name: "Album",
        props:{
          num:Number
        },
        components:{
          Pagination,
        },
        data(){
          return{
            currentIndex:0,
            albumList:[],
            area:[
              // {area:0,id:1,name:"内地"},
              // {area:0,id:0,name:"港台"},
              // {area:0,id:3,name:"欧美"},
              // {area:0,id:15,name:"韩国"},
              // {area:0,id:14,name:"日本"},
              // {area:0,id:4,name:"其他"},
            ],
            currentPage:1,
            total:0,
          }
    },
        methods:{
            chooseTag(index){
              this.currentIndex=index;
              this.currentPage=1;//初始化当前的页码
            },
            currentChange(data){//data表示子向父传递的方法的参数
              this.currentPage=data;
            },
            toAlbumDetail(mid,id){
              // console.log(id);
              this.$router.replace({path:`/albumdetail/${mid}/${id}`});
            },
            toSingerDetail(mid){
              this.$router.replace(`/singerdetail/${mid}`);
            }
        },
        computed:{
          ...mapState(['album']),
        },
        watch:{
            currentIndex(value){//监听到currentIndex的改变后，重新发送请求
              // console.log(value);
              this.$store.dispatch('getAlbum',{area:this.area[value].id,sin:(this.currentPage-1)*20,num:this.num})
            },
            currentPage(value){
              this.$store.dispatch('getAlbum',{area:this.area[this.currentIndex].id,sin:(this.currentPage-1)*20,num:this.num})
              // console.log(this.area[value].id);
              // console.log((this.currentPage - 1) * 20);
            },
            album(value){ //监听到state中，album的改变后，重新给data中的albumList赋值
              this.area=value.tags.area;
              this.albumList=value.list;
              this.total=value.total;
              // console.log(this.total);
              // console.log(this.area);
              // console.log(this.albumList);
            }
        },
        mounted(){
            this.$store.dispatch('getAlbum',{area:1,sin:(this.currentPage-1)*20,num:this.num})
        }
    }
</script>

<style scoped lang="less">
  .new_album{ width:100%;background:linear-gradient(to bottom,#f2f2f2,#fafafa);text-align: center;margin: 0 auto;position:relative;}
  .new_album .newDisc_type{position: relative;width: 1200px;margin: 0 auto}
  .new_album .newDisc_type li{display: inline-block;margin: 35px 25px;}
  .new_album .newDisc_type li.select{color: #31c27c;}
  .new_album .newDisc_type li:hover{cursor: pointer;color: #31c27c;}
  .new_album .newDisc_info{width: 1200px;margin: 0 auto;text-align: left}
  .new_album .newDisc_info li{margin-bottom:32px;font-size:14px;display: inline-block;width: 222px;margin-right: 17px;position: relative;}
  .new_album .newDisc_info li:nth-child(5n){margin-right: 0px;}
  .new_album .newDisc_info li img{width: 226px;height: 222px;display: block;cursor: pointer;transition: all 0.6s;}
  .new_album .newDisc_info li .name{margin-top: 19px;margin-bottom: 10px;}
  .new_album .newDisc_info li .singer{color: #999;}
  .new_album .newDisc_info li .name:hover{cursor: pointer;color: #31c27c;}
  .new_album .newDisc_info li .singer span:hover{cursor: pointer;color: #31c27c;}
  .new_album .newDisc_info li .date{margin-top:10px;color: #999;}
  .new_album .newDisc_info li .img:hover::after{content: '';display: block;width: 222px;height: 222px;position: absolute;top:0;left: 0;background: #000;opacity: 0.2;}
  .new_album .newDisc_info li .img{width: 222px;height: 222px;overflow: hidden;}
  .new_album .newDisc_info li .img:hover img{transform: scale(1.2);}
  .new_album .newDisc_info li .icon{position: absolute;z-index: 1;background: white;border-radius: 50%;height:40px;width: 40px;text-align: center;line-height: 40px;opacity: 0;transition: all 1s;top:30%;right: 0;left: 0;margin: 0 auto}
  .new_album .newDisc_info li .img:hover .icon{opacity: 1;transform: scale(1.3);}
  .new_album .newDisc_info li .iconfont{font-size: 25px;color: #545454;margin-left: 4px;margin-top: 3px;display: inline-block;}
</style>
